<template>
	<view class="goods-list">
		<goods-list :goods="goods"  @goodsItemClick="goGoodsDetail"></goods-list>
		<view class="isOver" v-if="flag">
			---我是底线---
		</view>
	</view>
</template>

<script>
	export default {
			data () {
				return {
					goods: [],
					pageindex:1,
					flag: false
				}
			},
			methods: {
				async getGoods (callBack) {
					const res = await this.$myRequest({
						url: '/api/shop/getgoods?pageindex='+this.pageindex
					})
					this.goods = [...this.goods,...res.data.message]
					callBack && callBack()
				},
				// 导航到商品详情页
				goGoodsDetail(id){
					uni.navigateTo({
						url:"/pages/goods-detail/goods-detail?id="+id
					})
				}
			},
			
			onLoad () {
			    this.getGoods()
			},
			onReachBottom () {
			 if(this.pageindex*6>this.goods.length) return this.flag = true
			  this.pageindex++
			  console.log("触底"+this.pageindex)
			  this.getGoods()
			},
			onPullDownRefresh() {
						console.log('下拉刷新了')
						this.pageindex = 1
						this.goods = []
						this.flag = false
						setTimeout(()=>{
						  this.getGoods(()=>{
								uni.stopPullDownRefresh()
							})	
						},1000)
					}
		}
</script>

<style lang="scss">
	.goods-list{
		background-color: #eee;
	}
	.isOver {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			// background: #fff;
			font-size: 28rpx;
		}
</style>
